<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title> Prototype </title>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type='text/javascript' src='jquery.js'></script>
		<script type='text/javascript' src='jquery-ui.js'></script>
		<script src="http://cdn.jquerytools.org/1.2.5/tiny/jquery.tools.min.js"></script>
		<script>
  			$(function() {
				$( ".draggable" ).draggable({ 
					scroll: true,
					drag: function(event, ui){
						if (this.nextElementSibling.className == "tooltip")
						{
							//$.tools.tooltip.hide();
							$(this.nextElementSibling).remove();
						}
					}
						
				});
				$( "#droppable" ).droppable({
					drop: function( event, ui ) {
						var text =  $.trim(ui.draggable.text()); //trim gets rid of whitespace before and after
						$("input").val(text);
						ui.draggable.remove();
						//$("form").submit(); //this line is used to submit the form, for development purpose it's commented out, 
								 //once we connect all the pieces together, we can put it back in
					}
				});
			});
		$(function() {
			$("#images_container .draggable ").tooltip({
				/*onHide:function() {
					$(".tooltip").remove();
				},*/
				position: 'bottom center',
				events: {
					def: "mouseover, mouseout mousedown"
				},
				relative: "true",
			});
		});
			//$("#demo img[title]").tooltip();
		</script>
	</head>
	<body>
		<div id="container">
			<div id = "header">
				<img src = "logo.png" alt=""></img>
			</div>
			<div id="searchform" >
				<img id="droppable" src="drophere.png" alt=""></img>
				<form class="ui-widget-header" onsubmit="return q.value!=''" method="GET" action="/search"  name="f"> 
					<input type="text" maxlength="2048" name="q" class="lst" autocomplete="off" size="41" title="Search" value="">
				</form>
			</div> <!--search form -->
			<div id="images_container">
			<!-- the 2 dimensional array store the image and the reference term. populate the array and the loop will generate the html code-->
<!--			<?php 
			$ar[0][0] = "images.jpg";
			$ar[0][1] = "ucla";
			$ar[1][0] = "images.jpg";
			$ar[1][1] = "ucla1";
			$ar[2][0] = "images.jpg";
			$ar[2][1] = "ucla2";
			for ($item = 0; $item < 3; $item++)
			{
				echo "<div class='draggable' class='ui-widget-content'>
						 <img src='".$ar[$item][0]."'><p>".$ar[$item][1]."</p></img>
					</div>";
			}
			?>-->
				
				<div class="draggable" class="ui-widget-content" >
					<img src="kevinlove.jpg"><p>ucla</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="kevinlove.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
				<div class="draggable" class="ui-widget-content" >
					<img src="images.jpg"><p>ucla1</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="images.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
				<div class="draggable" class="ui-widget-content" >
					<img src="1.jpg"><p>ucla1</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="1.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
								<div class="draggable" class="ui-widget-content" >
					<img src="2.jpg"><p>ucla1</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="2.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
								<div class="draggable" class="ui-widget-content" >
					<img src="3.jpg"><p>ucla1</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="3.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
								<div class="draggable" class="ui-widget-content" >
					<img src="4.jpg"><p>ucla1</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="4.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
				<div class="draggable" class="ui-widget-content" >
					<img src="5.jpg"><p>ucla1</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="5.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
			</div>

		</div><!--container -->
		<script>

		</script>
	</body>
</html>

